<template>
  <div class="container">
    <el-card class="box-card">
      <el-row
        ><el-button type="text" class="pink"
          >说明：目前支持学科和关键字条件筛选
        </el-button>
        <el-button
          type="success"
          class="right"
          icon="el-icon-edit"
          @click="handlechange(1)"
          >新增试题</el-button
        ></el-row
      >

      <!-- 表单 -->
      <el-form ref="form" label-width="70px" size="small">
        <el-row>
          <el-form-item label="学科">
            <el-select v-model="requestParams.subjectID" placeholder="请选择">
              <el-option
                v-for="(item, i) in subject"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select v-model="requestParams.directoryID" placeholder="请选择">
              <el-option
                v-for="(item, i) in directory"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="requestParams.tag" placeholder="请选择">
              <el-option
                v-for="(item, i) in tags"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              v-model="requestParams.keyword"
              style="width: 208px"
            ></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="试题类型">
            <el-select
              v-model="requestParams.questiontype"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, i) in questionOptionType"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="requestParams.difficulty" placeholder="请选择">
              <el-option
                v-for="(item, i) in difficulty"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="requestParams.direction" placeholder="请选择">
              <el-option
                v-for="(item, i) in direction"
                :key="i"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="requestParams.creator" placeholder="请选择">
              <el-option
                v-for="(item, i) in creator"
                :key="i"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="题目备注">
            <el-input
              v-model="requestParams.questioncomment"
              style="width: 208px"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input
              v-model="requestParams.companyName"
              style="width: 208px"
            ></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select
              v-model="requestParams.provinces"
              placeholder="请选择"
              style="width: 85px"
              @change="handleProvinces"
            >
              <el-option
                v-for="(item, i) in provinces"
                :key="i"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="requestParams.citys"
              placeholder="请选择"
              style="width: 85px;margin-left: 5px"
            >
              <el-option
                v-for="(item, i) in citys"
                :key="i"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button size="small" style="margin-left: 190px" @click="clear"
            >清除</el-button
          >
          <el-button type="primary" size="small" @click="search"
            >搜索</el-button
          >
        </el-row>
      </el-form>

      <!-- Tab 标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-alert type="info" show-icon :closable="false">
        <span slot="title">数据一共 {{ counts }} 条</span>
      </el-alert>
      <template>
        <el-table :data="choiceList" style="width: 100%" max-height="100%">
          <el-table-column prop="number" label="试题编号" width="150">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === 1">单选</span>
              <span v-else-if="scope.row.questionType === 2">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="300">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === 1">简单</span>
              <span v-else-if="scope.row.difficulty === 2">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.chkState === 1">待审核</span>
              <span v-else-if="scope.row.chkState === 2">通过</span>
              <span v-else>拒绝</span>
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.publishState === 0">已发布</span>
              <span v-else-if="scope.row.publishState === 1">已下架</span>
              <span v-else>待发布</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small">
                预览
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="onhandleSH(scope.row.id)"
                :disabled="scope.row.chkState === 1 || 2 ? true : false"
              >
                审核
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="handlechange(scope.row)"
              >
                修改
              </el-button>
              <el-button type="text" size="small" @click="onSale(scope.row)">
                <span v-if="scope.row.publishState === 1">上架</span>
                <span v-else>下架</span>
              </el-button>
              <el-button type="text" size="small" @click="remove(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页 -->
      <el-pagination
        class="fr"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestParams.page"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="requestParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>

    <!-- 审核弹框 -->
    <el-dialog
      title="题目审核"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="shForm" :rules="shFormRules" ref="shForm">
        <el-form-item>
          <el-radio v-model="shForm.shRadio" label="1">通过</el-radio>
          <el-radio v-model="shForm.shRadio" label="2">拒绝</el-radio>
        </el-form-item>

        <el-form-item prop="shTextarea" style="width: 100%">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核意见"
            v-model="shForm.shTextarea"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as directorylist } from '../../api/hmmm/directorys'
import { simple as taglist } from '../../api/hmmm/tags'
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { simple as user } from '../../api/base/users'
import { provinces, citys } from '../../api/hmmm/citys'
import {
  choice as questionClist,
  choiceAdd,
  detail,
  choicePublish,
  choiceCheck
} from '../../api/hmmm/questions'

export default {
  name: 'questionChioce',
  data() {
    return {
      requestParams: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        directoryID: null,
        tag: null,
        keyword: null, // 关键字
        questiontype: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creator: null, // 录入人
        questioncomment: null, // 题目备注
        companyName: null, // 企业简称
        provinces: null, // 城市
        citys: null, // 地区
        chkState: null // 审核状态
      },
      // 学科简单列表
      subject: [],
      // 目录列表
      directory: [],
      // 标签列表
      tags: [],
      // 试题类型
      questionOptionType: questionType,
      // 难度
      difficulty,
      // 方向
      direction,
      creator: [],
      // 所有城市
      provinces: [],
      // 城市下地区
      citys: [],
      activeName: 'first', // 跳转时的 当前 Tab 名
      choiceList: [], // 精选列表
      counts: null, // 数据总条数
      dialogVisible: false,
      shForm: {
        shRadio: '1',
        shTextarea: ''
      },
      shFormRules: {
        shTextarea: [
          { required: true, message: '请填写审核意见', trigger: 'blur' }
        ]
      },
      shid: ''
    }
  },
  created() {
    this.getSubjectlist()
    this.getDirectorylist()
    this.getTagslist()
    this.getUserinfo()
    this.getProvinceslist()
    this.getQuestionlist()
  },
  mounted() {},
  methods: {
    async getSubjectlist() {
      const { data } = await subjectList()
      this.subject = data
    },
    async getDirectorylist() {
      const { data } = await directorylist()
      this.directory = data
    },
    async getTagslist() {
      const { data } = await taglist()
      this.tags = data
    },
    async getUserinfo() {
      const { data } = await user()
      this.creator = data
    },
    // 获取所有市
    getProvinceslist() {
      const pro = provinces()
      // console.log(pro)
      this.provinces = pro
    },
    // 根据选择的城市，获取相应地区
    handleProvinces(e) {
      // console.log(e)
      const city = citys(e)
      // console.log(city)
      this.citys = city
    },
    // 清除表单
    clear() {
      this.requestParams = {}
    },
    // 监听标签页跳转的变化
    handleClick() {
      console.log(this.activeName)
      if (this.activeName === 'first') {
        this.requestParams.chkState = null
        this.getQuestionlist()
      } else if (this.activeName === 'second') {
        this.requestParams.chkState = 0
        this.getQuestionlist(this.requestParams)
      } else if (this.activeName === 'third') {
        this.requestParams.chkState = 1
        this.getQuestionlist(this.requestParams)
      } else {
        this.requestParams.chkState = 2
        this.getQuestionlist(this.requestParams)
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    // 精选题库列表
    async getQuestionlist() {
      const { data } = await questionClist(this.requestParams)
      // console.log(data)
      this.choiceList = data.items
      this.counts = data.counts
    },
    // 新增试题和修改跳转
    async handlechange(data) {
      console.log(data)
      if (data === 1) {
        this.$router.push({ name: 'questions-new' })
      } else {
        const res = await detail({ id: data.id })
        console.log(res)
        this.$router.push({ name: 'questions-new', params: { id: res.data } })
      }
    },
    search() {
      this.getQuestionlist()
    },
    handleSizeChange(newSize) {
      this.requestParams.pagesize = newSize
      this.getQuestionlist()
    },
    handleCurrentChange(newPage) {
      this.requestParams.page = newPage
      this.getQuestionlist()
    },
    // 删除精选
    async remove(data) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await choiceAdd({
            id: data.id,
            choiceState: 0
          })
            .then(response => {
              this.$message.success('删除成功')
              this.getQuestionlist()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {})
    },

    // 上架下架
    async onSale(xxx) {
      try {
        console.log(xxx)
        const { data } = await choicePublish({
          id: xxx.id,
          publishState: xxx.publishState === 1 ? 0 : 1
        })
        console.log(data)
      } catch (err) {
        console.log(err)
      }
      this.getQuestionlist()
    },

    handleClose(done) {
      this.dialogVisible = false
    },

    async onSubmit() {
      try {
        this.$refs.shForm.validate(async valid => {
          if (!valid) {
            return this.$message.error('请填写审核意见')
          }
          await choiceCheck({
            id: this.shid,
            chkState: this.shForm.shRadio - 0,
            chkRemarks: this.shForm.shTextarea
          })
          this.$message.success('审核成功')
          this.$refs.shForm.resetFields()
          this.dialogVisible = false
        })
      } catch (err) {
        console.log(err)
      }
    },

    onhandleSH(id) {
      this.dialogVisible = true
      this.shid = id
    }
  }
}
</script>

<style scoped>
.el-card {
  margin: 15px 25px 0 10px;
}
.pink {
  color: pink;
  font-size: 12px;
}
.right {
  float: right;
  margin-bottom: 15px;
}

.el-form-item {
  float: left;
}

.dialog-footer {
  margin-left: 225px;
}
</style>
